<template>
  <div class='app-container'>
      <el-card shadow="never">
        <el-h3>6组_杜铖</el-h3><br><br>
        <div class="header">
          <el-button type="success" size='small' @click="add" icon="el-icon-edit">新增试题</el-button>
        </div>

        <!-- 1. 表单区域 -->
        <el-form :model="requestParameters" ref="form" label-position="right" label-width="100px">

          <el-row :gutter="10">
            <!-- 学科 -->
            <el-col :span="6">
              <el-form-item label="学科: " prop="subjectID">
                <el-select
                  @change="directoryName"
                  v-model="requestParameters.subjectID"
                  @keyup.enter="handleFilter"
                  filterable
                  placeholder="请选择" style="width:100%;">
                  <el-option
                    style="height:50px"
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 二级目录 -->
            <el-col :span="6">
              <el-form-item label="二级目录: " prop="catalogID">
                <el-select
                v-model="requestParameters.catalogID"
                @keyup.enter="handleFilter"
                placeholder="请选择" style="width:100%;">
                  <el-option
                    v-for="item in catalogIDOptions"
                    :key="item.id"
                    :label="item.directoryName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 标签 -->
            <el-col :span="6">
              <el-form-item label="标签: " prop="tags">
                <el-select
                @keyup.enter="handleFilter"
                v-model="requestParameters.tags"
                placeholder="请选择"  style="width:100%;">
                  <el-option
                    v-for="item in tagsOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 关键字 -->
            <el-col :span="6">
              <el-form-item label="关键字: " prop="keyword">
                <el-input
                  @keyup.enter="handleFilter"
                  v-model="requestParameters.keyword"
                  style="width:100%"
                  placeholder="请输入"
                  class="filter-item"
                ></el-input>
              </el-form-item>
            </el-col>

            <!-- 试题类型 -->
            <el-col :span="6">
              <el-form-item label="试题类型: " prop="questionType">
                <el-select
                  @keyup.enter="handleFilter"
                  v-model="requestParameters.questionType"
                  placeholder="请选择" style="width:100%">
                  <el-option :label="item.label" :value="item.value" v-for="item in questionType" :key="item.value">{{item.label}}</el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 难度 -->
            <el-col :span="6">
              <el-form-item label="难度: " prop="difficulty">
                <el-select
                  @keyup.enter="handleFilter"
                  v-model="requestParameters.difficulty"
                  placeholder="请选择" style="width:100%">
                  <el-option v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">{{item.label}}</el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 方向 -->
            <el-col :span="6">
              <el-form-item label="方向: " prop="direction">
                <el-select
                  @keyup.enter="handleFilter"
                  v-model="requestParameters.direction"
                  placeholder="请选择"
                  style="width:100%">
                  <el-option
                    v-for="item in direction"
                    :key="item"
                    :label="item"
                    :value="item">{{item}}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 录用人 -->
            <el-col :span="6">
              <el-form-item label="录用人: " prop="creatorID">
                <el-select v-model="requestParameters.creatorID"
                  placeholder="请选择" style="width:100%">
                  <el-option
                    @keyup.enter="handleFilter"
                    v-for="item in userOption"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id">{{item.username}}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 题目备注 -->
            <el-col :span="6">
              <el-form-item label="题目备注: " prop="remarks">
                <el-input
                  @keyup.enter="handleFilter"
                  v-model="requestParameters.remarks"
                  style="width:100%"
                  placeholder="请输入"
                  class="filter-item"
                ></el-input>
              </el-form-item>
            </el-col>

            <!-- 企业简称 -->
            <el-col :span="6">
              <el-form-item label="企业简称: " prop="shortName">
                <el-input
                  @keyup.enter="handleFilter"
                  v-model="requestParameters.shortName"
                  style="width: 100%;height: 50px"
                  placeholder="请输入"
                  class="filter-item"
                ></el-input>
              </el-form-item>
            </el-col>

            <!-- 城市 -->
            <el-col :span="6">
              <el-form-item label="城市: " prop="province">
                <el-select v-model="requestParameters.province"
                placeholder="请选择省"
                @keyup.enter="handleFilter"
                @change="handleProvince"
                filterable
                style="width:45%;margin-right:10%">
                  <el-option
                    v-for="item in citySelect.province"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
                <el-select
                v-model="requestParameters.city"
                @keyup.enter="handleFilter"
                filterable
                placeholder="请选择市" style="width:45%">
                  <el-option
                    v-for="item in citySelect.cityDate"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 操作 -->
            <el-col :span="6">
              <el-form-item>
                <div class="right">
                  <el-button @click="hResetForm('form')">清除</el-button>
                  <el-button type="primary" @click="handleFilter" :loading="btnLoading">搜索</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 2. tab导航 -->
        <el-tabs v-model="chkState" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="待审核" name="0"></el-tab-pane>
          <el-tab-pane label="已审核" name="1"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
        </el-tabs>

        <!-- 3. 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>

        <!-- 表格和分页区域 -->
        <div v-loading="listLoading">
          <!-- 4. 表格列表 -->
          <el-table
            :data="dataList"
            element-loading-text="给我一点时间"
            highlight-current-row
            style="width: 100%"
            border>

            <!-- 试题编号 -->
            <el-table-column align="center" label="试题编号" width="120px">
              <template slot-scope="scope">
                <span>{{scope.row.number}}</span>
              </template>
            </el-table-column>

            <!-- 学科 -->
            <el-table-column align="center" label="学科" width="120px">
              <template slot-scope="scope">
                <span>{{scope.row.subject}}</span>
              </template>
            </el-table-column>

            <!-- 目录 -->
            <el-table-column align="center" label="目录" width="120px">
              <template slot-scope="scope">
                <span>{{scope.row.catalog}}</span>
              </template>
            </el-table-column>

            <!-- 题型 -->
            <el-table-column label="题型" align="center" prop="question" width="120px">
              <template slot-scope="scope">
                <span v-if="scope.row.questionType==='1'">单选题</span>
                <span v-else-if="scope.row.questionType==='2'">多选题</span>
                <span v-else-if="scope.row.questionType==='3'">简答题</span>
                <!-- <span v-html="scope.row.question"></span> -->
              </template>
            </el-table-column>

            <!-- 题干 -->
            <el-table-column align="center" label="题干" width="280px">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>

            <!-- 录入时间 -->
            <el-table-column align="center" label="录入时间" width="180px">
              <template slot-scope="scope">
                <span>{{scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}</span>
              </template>
            </el-table-column>

            <!-- 难度 -->
            <el-table-column align="center" label="难度" width="80px">
              <template slot-scope="scope">
                <span v-if="scope.row.difficulty==1">简单</span>
                <span v-else>困难</span>
              </template>
            </el-table-column>

            <!-- 录入人 -->
            <el-table-column align="center" label="录入人" width="120px">
              <template slot-scope="scope">
                <span>{{scope.row.creator}}</span>
              </template>
            </el-table-column>

            <!-- 审核状态 -->
            <el-table-column align="center" label="审核状态" width="120px">
              <template slot-scope="scope">
                <span v-if="scope.row.chkState===0">待审核</span>
                <span v-else-if="scope.row.chkState===1">已通过</span>
                <span v-else-if="scope.row.chkState===2">已拒绝</span>
              </template>
            </el-table-column>

            <!-- 审核意见 -->
            <el-table-column align="center" label="审核意见" width="150px">
              <template slot-scope="scope">
                <span>{{scope.row.chkRemarks}}</span>
              </template>
            </el-table-column>

            <!-- 审核人 -->
            <el-table-column align="center" label="审核人" width="120px">
              <template slot-scope="scope">
                <span>{{scope.row.chkUser}}</span>
              </template>
            </el-table-column>

            <!-- 发布状态 -->
            <el-table-column align="center" label="发布状态" width="150px">
              <template slot-scope="scope">
                <span v-if="scope.row.chkState==0||scope.row.chkState==2">待发布</span>
                <span v-else-if="scope.row.publishState==1&&scope.row.chkState===1">已发布</span>
                <span v-else-if="scope.row.publishState==0&&scope.row.chkState===1">已下架</span>
              </template>
            </el-table-column>

            <!-- 操作按钮 -->
            <el-table-column
              align="center"
              label="操作"
              fixed="right"
              width="200px"
              class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <div class="operating">
                  <el-link type="primary" :underline="false" @click="preview(scope.row)">预览</el-link>
                  <el-link type="primary" @click="reviewQuestion(scope.row)" :disabled='scope.row.chkState!==0' :underline="false">审核</el-link>
                  <el-link type="primary" :disabled='scope.row.publishState==1&&scope.row.chkState===1' :underline="false" @click="editQuestion(scope.row)">修改</el-link>

                  <div>
                    <el-link type="primary" :disabled="scope.row.chkState===0" @click="publishQuestion(scope.row)" v-if="scope.row.publishState==1&&scope.row.chkState===1" :underline="false">下架</el-link>
                    <el-link type="primary" :disabled="scope.row.chkState===0" @click="publishQuestion(scope.row)" v-else :underline="false">上架</el-link>
                  </div>
                  <el-link type="primary" :disabled='scope.row.publishState==1&&scope.row.chkState===1' :underline="false" @click="delQuestion(scope.row)">删除</el-link>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 5. 分页 -->
          <div class="pagination">
            <div class="pages">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="Number(requestParameters.page)"
                :page-sizes="[10, 20, 30, 40]"
                :total="Number(total)"
                layout="prev, pager, next, sizes, jumper"
              ></el-pagination>
            </div>
          </div>
        </div>

        <!-- 6. 题目预览区域 -->
        <el-dialog title="题目预览"
          append-to-body
          :visible.sync="outerVisible">
          <div class="dialog">
            <el-row>
              <el-col :span="6">【题型】 :
                <span v-if="previewOption.questionType==='1'">单选题</span>
                <span v-else-if="previewOption.questionType==='2'">多选题</span>
                <span v-else-if="previewOption.questionType==='3'">简答题</span>
              </el-col>
              <el-col :span="6">【编号】 :
                <span>{{previewOption.id}}</span>
              </el-col>
              <el-col :span="6">【难度】 :
                <span v-if="previewOption.difficulty==1">简单</span>
                <span v-else>困难</span>
              </el-col>
              <el-col :span="6">【标签】 : <span>{{previewOption.tags}}</span></el-col>
            </el-row>
            <el-row>
              <el-col :span="6">【学科】 : <span>{{previewOption.subjectName}}</span></el-col>
              <el-col :span="6">【目录】 : <span>{{previewOption.directoryName}}</span></el-col>
              <el-col :span="6">【方向】 : <span>{{previewOption.direction}}</span></el-col>
            </el-row>
            <hr>
            【题干】 : <div v-html="previewOption.question"></div>
            <div v-if="previewOption.questionType!=='3'">
              <span v-if="previewOption.questionType==='1'">单选题</span>
              <span v-else-if="previewOption.questionType==='2'">多选题</span>
              <!-- <span v-else-if="previewOption.questionType==='3'">简答题</span> -->
              选项 : (以下选中的选项为正确答案)
            </div>
            <!-- 单选题 -->
            <!-- <ul v-if="previewOption.questionType==='1'" style="padding-left:10px">
              <li v-for="item in previewOption.options" :key="item.id" :class="{blue:item.isRight===1}">  <el-radio :disabled="item.isRight!==1"></el-radio>{{item.title}}</li>
            </ul> -->
            <el-radio-group :value="1" v-if="previewOption.questionType==='1'" style="margin-top:10px;margin-left:10px">
              <el-row v-for="item in previewOption.options" :key="item.id"><el-radio :label="item.isRight">{{item.title}}</el-radio></el-row>
            </el-radio-group>
            <!-- 多选题 -->
            <!-- <ul v-if="previewOption.questionType==='2'">
              <li v-for="item in previewOption.options" :key="item.id">
                <el-checkbox :disabled="item.isRight!==1" :checked="item.isRight===1"></el-checkbox>{{' ' + item.title}}
              </li>
            </ul> -->
            <el-checkbox-group :value="[1]" v-if="previewOption.questionType==='2'">
              <el-checkbox style="display:block;margin-left:10px;margin-top:10px" v-for="item in previewOption.options" :key="item.id" :label="item.isRight">{{item.title}}</el-checkbox>
            </el-checkbox-group>
            <hr>
            【参考答案】 : <el-button type="danger" @click="innerVisible=true">视频答案预览</el-button>
            <div v-if="innerVisible" style="margin-top:20px">
              <video width="80%" :src="previewOption.videoURL" controls="controls" muted></video>
            </div>
            <hr>
            【答案解析】 : <span v-html="previewOption.answer"></span>
            <hr>
            【题目备注】 : <span v-html="previewOption.remarks"></span>

          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="outerVisible=false">关 闭</el-button>
          </div>
        </el-dialog>

        <!-- 7. 审核预览 -->
        <el-dialog title="题目审核"
          append-to-body
          :visible.sync="ReviewView">
            <el-form ref="ReviewViewForm" :model="ReviewViewForm">
              <el-form-item prop="resource" :rules="[{required: true, message: '不能为空'}]">
                <el-radio-group v-model="ReviewViewForm.resource">
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="2">拒绝</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="desc">
                <el-input type="textarea" v-model="ReviewViewForm.desc" placeholder="请输入审核意见" ></el-input>
              </el-form-item>
              <el-form-item style="text-align:center">
                <el-button type="primary" @click="submitReviewViewForm">提交</el-button>
                <el-button @click="ReviewView=false">取消</el-button>
              </el-form-item>
            </el-form>
        </el-dialog>

      </el-card>
  </div>
</template>

<script>

import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list, subjects, users, directorys, tags, preview, review, publish, del } from '@/api/hmmm/questions-choice.js'
export default {
  name: 'FeaturedList',
  data () {
    return {
      ReviewViewForm: {
        id: '', // 需要审核的id
        resource: 1, // 审核是否通过
        desc: '' // 审核意见
      }, // 审核预览表单
      ReviewView: false, // 审核预览显示
      innerVisible: false, // 内层是否显示视频
      outerVisible: false, // 外层预览框
      previewOption: {}, // 题目预览列表
      chkState: 'first', // tab默认状态
      btnLoading: false, // 搜索按钮的状态
      requestParameters: {
        subjectID: null, // 学科下拉选中
        catalogID: null, // 二级目录下拉选中
        tags: null, // 标签下拉选中
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录用人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 城市
        city: null, // 区
        page: 1, // 当前的页数
        pagesize: 10 // 每页显示的条数
      },
      total: 0, // 查询到的总条数
      listLoading: false, // 页面的加载状态
      dataList: [], // table数据的列表
      alertText: '', // 显示的信息
      options: [], // 学科下拉列表渲染
      userOption: [], // 用户下拉列表
      catalogIDOptions: [], // 二级目录列表数据
      tagsOptions: [], // 标签列表数据
      citySelect: {
        province: [], // 省的数据
        cityDate: [] // 市的数据
      }
    }
  },
  methods: {
    // 点击删除按钮
    delQuestion (val) {
      // console.log(val)
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await del({ id: val.id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        } catch (error) {
          console.log(error)
          this.$message({
            type: 'error',
            message: '删除失败!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击上架或下架按钮
    publishQuestion (val) {
      // console.log(val)
      this.$confirm(`您确认${val.publishState === 0 ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          if (val.publishState === 0) {
            val.publishState = 1
          } else {
            val.publishState = 0
          }
          await publish({ id: val.id, publishState: val.publishState })
          this.getList()
          this.$message({
            type: 'success',
            message: `${val.publishState === 0 ? '下架' : '上架'}成功!`
          })
        } catch (error) {
          console.log(error)
          this.$message({
            type: 'error',
            message: '上架失败!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消上架'
        })
      })
    },
    // 点击修改按钮
    editQuestion (val) {
      // console.log(val)
      this.$router.push({
        name: 'questions-new',
        params: {
          id: val.id
        }
      })
    },
    // 点击审核按钮
    async reviewQuestion (item) {
      // console.log(item)
      this.ReviewViewForm.desc = ''
      this.ReviewViewForm.id = item.id
      this.ReviewView = true
    },
    // 题目审核提交
    async submitReviewViewForm () {
      if (!this.ReviewViewForm.desc.trim()) {
        this.$message({
          message: '请输入审核意见',
          type: 'warning',
          duration: 1000
        })
        return
      }
      try {
        const res = await review({ id: this.ReviewViewForm.id, chkState: this.ReviewViewForm.resource, chkRemarks: this.ReviewViewForm.desc })
        console.log(res)
        this.$message({
          message: '审核成功',
          type: 'success',
          duration: 1000
        })
        this.ReviewView = false
        this.getList()
      } catch (error) {
        console.log(error)
        this.$message({
          message: '审核失败',
          type: 'error',
          duration: 1000
        })
      }
    },
    // 预览功能
    async preview (val) {
      // console.log(1, val)
      this.innerVisible = false
      const res = await preview({ id: val.id })
      // console.log(res)
      this.outerVisible = true
      this.previewOption = res.data
    },
    // 切换tab栏
    handleClick () {
      // console.log(this.chkState)
      if (this.chkState === 'first') {
        this.chkState = null
        this.requestParameters.page = 1
        this.getList()
        this.requestParameters.chkState = this.chkState
        this.chkState = 'first'
      } else {
        this.requestParameters.chkState = this.chkState
        this.requestParameters.page = 1
        this.getList()
      }
    },
    // 获取列表数据
    async getList () {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      // console.log(res)
      this.dataList = res.items
      this.cHml = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 点击跳转试题录入
    add () {
      this.$router.push({
        name: 'questions-new'
      })
    },
    // 切换分页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    },
    // 选择一页显示多少条
    handleSizeChange (val) {
      // console.log(val)
      this.requestParameters.pagesize = val
      this.requestParameters.page = 1
      this.getList()
    },
    // 清空表单
    hResetForm (formName) {
      this.catalogIDOptions = null // 清空二级目录下的数据
      this.tagsOptions = null // 清空标签下拉
      this.requestParameters.city = null // 清空选中区
      this.citySelect.cityDate = null // 清空区的列表
      this.$refs[formName].resetFields()
    },
    // 获取学科列表
    async getSubjectList () {
      const res = await subjects()
      // console.log(res)
      this.options = res.data.map(({ value, label }) => ({ id: value, name: label }))
    },
    // 获取用户列表
    async getUserList () {
      const res = await users()
      // console.log('用户列表', res)
      this.userOption = res.data.list
    },
    // 搜索事件
    async handleFilter () {
      this.btnLoading = true
      this.requestParameters.page = 1
      await this.getList()
      this.btnLoading = false
    },
    // 获取省
    getCityData () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince (e) {
      this.citySelect.cityDate = citys(e)
      this.requestParameters.city = this.citySelect.cityDate[0]
    },
    // 二级目录列表和标签列表
    async directoryName (e) {
      // 二级目录列表
      const res = await directorys({ subjectID: e })
      // console.log(res.data.items)
      this.catalogIDOptions = res.data.items.map(({ directoryName, id }) => ({ directoryName, id }))
      if (this.catalogIDOptions.length !== 0) {
        // 当有值的时候将第一个值赋值给下拉
        this.requestParameters.catalogID = this.catalogIDOptions[0].id
      } else {
        this.requestParameters.catalogID = null
      }

      // 标签列表
      const res1 = await tags({ subjectID: e })
      // console.log(res1)
      this.tagsOptions = res1.data.map(({ label, value }) => ({ id: value, name: label }))
      if (this.tagsOptions.length !== 0) {
        // 当有值的时候将第一个值赋值给下拉
        this.requestParameters.tags = this.tagsOptions[0].id
      } else {
        this.requestParameters.tags = null
      }
    }
  },
  created () {
    this.getSubjectList() // 获取学科列表
    this.getUserList() // 获取用户列表
    this.getList() // 获取列表数据
    this.getCityData() // 初始化市的数据
    // 键盘enter操作
    var _this = this
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter()
      }
    }
  },
  computed: {
    difficulty () {
      return difficulty
    },
    questionType () {
      return questionType
    },
    direction () {
      return direction
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.header {
  height: 50px;
}
.header .el-button{
  float: right;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.right {
  float: right;
}
.operating {
  display: flex;
  justify-content: space-around;
}
.el-link.el-link--primary.is-disabled {
  color: #c0c4cc;
}
.pages {
  display: flex;
  justify-content: flex-end;
}
.dialog {
  font-size: 18px;
  line-height: 30px;
}
li {
  list-style: none;
}
</style>
